<template>
  <div>
    <el-dialog :visible.sync="isVisible" title="更新用户" center :close-on-press-escape="false" :close-on-click-modal="false">
      <el-form ref="userForm" size="mini" status-icon label-position="left" label-width="60px" :model="userForm" :rules="userFormRules">
        <el-form-item label="账号" prop="username">
          <el-col :span="21">
            <el-input v-model="userForm.username" autocomplete="off" placeholder="账号" />
          </el-col>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-col :span="21">
            <el-input v-model="userForm.nickname" autocomplete="off" placeholder="昵称" />
          </el-col>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-col :span="21">
            <el-input v-model="userForm.avatar" autocomplete="off" placeholder="头像" />
          </el-col>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-col :span="21">
            <el-input v-model="userForm.phone" autocomplete="off" placeholder="电话" />
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :span="21">
            <el-input v-model="userForm.email" autocomplete="off" placeholder="邮箱" />
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-col :span="21">
            <el-radio-group v-model="userForm.sex">
              <el-radio :label="0">
                男
              </el-radio>
              <el-radio :label="1">
                女
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-col :span="21">
            <el-input v-model="userForm.age" autocomplete="off" placeholder="年龄" />
          </el-col>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-col :span="21">
            <el-select v-model="userForm.status" placeholder="请选择状态">
              <el-option label="正常" :value="0" />
              <el-option label="冻结" :value="1" />
              <el-option label="删除" :value="2" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-col :span="21">
            <el-select v-model="userForm.roleIds" multiple placeholder="请选择角色" value-key="id" @change="changeHandle">
              <el-option v-for="item in roles" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-checkbox v-model="allChecked" style="margin-left: 12px" @change="checkedAllHandle">
              全选
            </el-checkbox>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">
          取 消
        </el-button>
        <el-button type="primary" size="mini" :loading="loading" @click="updateHandle('userForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserUpdate',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      userForm: {
        id: '',
        username: '',
        password: '',
        nickname: '',
        reallyName: '',
        avatar: '',
        phone: '',
        email: '',
        sex: '',
        age: '',
        status: '',
        // 此用户所拥有的角色id
        roleIds: []
      },
      // 所有角色信息（id、label）
      roles: [],
      // 角色全选标识
      allChecked: false,
      // 修改提交加载动画
      loading: false,
      userFormRules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        reallyName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        avatar: [{ required: true, message: '请输入头像', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        roleIds: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      }
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    isVisible(visible) {
      if (visible) {
        this.getUserHandle()
        this.listRoleNameHandle()
      }
    }
  },
  methods: {
    getUserHandle() {
      this.AjaxUtils.get('/user/getUser', { userId: this.userId }).then((response) => {
        this.userForm = response.data
      }).catch(() => {
        console.error('服务器错误')
      })
    },
    listRoleNameHandle() {
      this.AjaxUtils.get('/role/listRoleName').then((response) => {
        this.roles = response.data
      }).catch(() => {
        console.error('服务器错误')
      })
    },
    changeHandle(changeData) {
      this.allChecked = changeData.length === this.roles.length
    },
    checkedAllHandle(allChecked) {
      if (allChecked) {
        this.userForm.roleIds = []
        this.roles.forEach(item => {
          this.userForm.roleIds.push(item.id)
        })
      } else {
        this.userForm.roleIds = []
      }
    },
    updateHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // params
          // ajax
          // todo this.userForm 传参后台接收不到
          this.loading = true
          this.AjaxUtils.put('/user/updateUser', this.userForm, true).then((response) => {
            this.loading = false
            this.isVisible = false
            this.$emit('reloadTable')
            console.log(response)
          }).catch(() => {
            this.loading = false
            console.error('服务器错误')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-select {
    width: 100%;
  }
</style>
